<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0525-JS作业1查找替换-螺旋</title>
	<style type="text/css">
		html{font-family: "Microsoft YaHei";}
		body{margin: 0;}
		.wrap{
			margin: 20px auto;
			padding: 20px;
			width: 500px;
			height: 200px;
			border: 1px solid #666;
			box-sizing: border-box;
		}
		.wrap button{
			cursor: pointer;
		}
		.wrap p{
			margin-top: 20px;
		}
		.wrap span{
			font-size: 20px;
			font-weight: 700;
			color: #f00;
		}
		.wrap .gray{
			color: gray;
		}
	</style>
</head>
<body>
<section class="wrap">
	<input type="text">
	<button>查找</button>
	<input type="text">
	<button>替换</button>
	<p>今天吃饺子，大饺子，三鲜饺子，猪肉白菜饺子，猪肉茴香饺子，韭菜鸡蛋饺子，全是饺子。</p>
	<p class="gray">（可以反复查找和替换 已经处理了各种可能发生的情况）</p>
</section>
</body>
<script type="text/javascript">
    var oTxt = document.getElementsByTagName('input'),//获取输入框组
        oTxt1 = oTxt[0],//获取第一个输入框
		oTxt2 = oTxt[1],//获取第一个输入框
        oBtn = document.getElementsByTagName('button'),//获取按钮标签组
	    oBtnS = oBtn[0],//获取第一个按钮
	    oBtnC = oBtn[1],//获取第一个按钮
	    oStr = document.getElementsByTagName('p')[0];//获取字符串标签

    oBtnS.onclick = function(){//点击查找按钮
        fnget();//获取查找关键字 分割原字符串为数组
        fnspan();//获取span标签和个数
        if(oSpanL<1){//如果不存在span
            fn();//循环拼接生成新的字符串
        }else{//如果存在span
            if(sText === oSpan[0].innerHTML){//如果查找关键字与span中的字符串相同
            }else{//如果查找关键字与span中的字符串不同 则将现有的带span的字符串转换为不带span的字符串 然后执行搜索
                defStr = oStr.innerHTML.split(`<span>${oSpan[0].innerHTML}</span>`);//将原字符串按照span和其中的字符串为间隔进行分割
                oStr.innerHTML = defStr.join(oSpan[0].innerHTML);//将替span中的字符串作为分隔符 重新将数组拼接为新的字符串
	            fnget();//执行通用函数1 将原字符串以查找关键字为间隔 分割为数组
                fn();//循环拼接生成新的字符串
            }
        }
    };
    
    oBtnC.onclick = function(){//点击替换按钮
        cText = oTxt2.value;//获取替换关键字
        fnspan();//获取span标签和个数
        if(oSpanL>0){//如果存在span标签 则继续执行
	        if(cText){//如果替换关键字不为空 则继续执行
                defStr = oStr.innerHTML.split(`<span>${sText}</span>`);//将原字符串按照带span的查找关键字为间隔进行分割
                oStr.innerHTML = defStr.join(cText);//将替换词作为分隔符 重新将数组拼接为新的字符串
	        }
        }
    };

    //通用函数1 获取span标签及其个数
    function fnspan(){
        oSpan = document.getElementsByTagName('span');//获取span标签
        oSpanL = oSpan.length;//获取span标签的个数
    }
    //通用函数2 获取查找关键字 分割原字符串为数组
    function fnget(){
        sText = oTxt1.value;//获取查找关键字
        defStr = oStr.innerHTML.split(sText);//将原字符串按照查找关键字为间隔进行分割
        defStrL = defStr.length;//分割后的数组内容长度
    }
    //通用函数3 生成查找关键字带span的新字符串
    function fn(){
        if(sText){//如果查找关键字不为空 则继续执行
            if(defStrL>1){//如果查找关键字可以匹配到内容 则继续执行
                oStr.innerHTML = defStr.join(`<span>${sText}</span>`);//将查找词加span标签后作为分隔符 重新将数组拼接为新的字符串
            }
        }
    }
</script>
</html>